import React, { useEffect, useState, useRef } from 'react';
import { Mask } from '@/components/UiComponents'
import { View, Button } from '@tarojs/components'
import { backgroundObj, loginData } from '@/utils/utils';
import { fetchShareInfo } from '@/server/shop';
import TaroShareDrawer from './components/TaroShareDrawer';
import { rssConfigData } from './components/TaroShareDrawer/data';
import './index.scss';
const ShareImage = (props) => {
  const { data = {}, dispatch, visible, onClose, onOpenDrop, hpFlag = '0', renderStyle = 'default' } = props
  const { picture, goodsName, id, goodsType, startTime, price
  } = data
  const account = loginData() || {}
  const { username, unionId, openId, organizationId, profile } = account
  const [shareData, setShareData] = useState({})
  const [shareImage, setShareImg] = useState('')
  const [selectIndex, setSelectIndex] = useState(0)
  const [cavansObj, setCavansObj] = useState({
    data: null,
    start: false,
  })
  const containerRef = useRef(null);

  const shareCode = () => {
    fetchShareInfo({
      shareId: id,
      shareType: 'goods',
      subType: goodsType,
      organizationId: organizationId
    }).then(e => {
      setShareData(e)
    })
  }
  const { posterList = [], shareInfo = {} } = shareData
  const { frontImage = '', wechatUrl = ''
  } = shareInfo
  useEffect(() => {
    if (visible) {
      shareCode()
    }
    else {
      setSelectIndex(0)
      setCavansObj({
        data: null,
        start: false,
      })
    }
  }, [visible])
  const convertToImage = async (item) => {
    const { frontImage, miniProgramQrCodeUrl, shareImg } = shareInfo
    setCavansObj({
      data: null,
      start: false,
    })
    setTimeout(() => {
      setCavansObj({
        start: true,
        data: {
          ...rssConfigData({
            ...item,
            goodsName,
            price,
            profile,
            username,
            cover: frontImage,
            code: miniProgramQrCodeUrl || frontImage,
            shareImg: shareImg
          })
        }
      })
    }, 500)
  }
  useEffect(() => {
    if (posterList.length > 0) {
      convertToImage(posterList[0])
    }
  }, [shareData])
  return <Mask
    show={visible}
    zIndex={10000000006}
    closeBtn={false}
    position={'top'}
    onClose={() => {
      setCavansObj({
        data: null,
        start: false,
      })
      onClose(false)

    }}
  >
    <View onClick={(e) => {
      e.stopPropagation()
      onClose(false)
    }} className={hpFlag === '1' ? 'shareImage_share_layer shareImage_shareHp_layer' : 'shareImage_share_layer'}>
      <View onClick={(e) => {
        e.stopPropagation()

      }} className='shareImage_image_margin'>
        <View className='shareImage_image_long'>
          <TaroShareDrawer
            ref={containerRef}
            {...cavansObj}
            onSave={() => console.log("点击保存")}
            onClose={() =>
              setCavansObj({
                data: null,
                start: false,
              })
            }></TaroShareDrawer>
        </View>
      </View>
      <View onClick={(e) => {
        e.stopPropagation()
      }} className='shareImage_image_handle'>
        <View className='shareImage_image_handleClose' onClick={() => onClose(false)}>
        </View>
        <View className='shareImage_image_imageSet'>
          <View className='shareImage_image_scorll'>
            {posterList.map((item, index) => {
              const { bgImage } = item
              return <View className={index === selectIndex ? `shareImage_image_scorllSelect` : `shareImage_image_scorllNoSelect`}>
                <View onClick={() => {
                  convertToImage(item)
                  setSelectIndex(index)
                }} style={{ ...backgroundObj(bgImage), width: '100%', height: '100%' }}></View>
              </View>
            })}
          </View>
          {/* <View className='shareImage_image_imageCoby' onClick={() => onOpenDrop()}>
            <View className='shareImage_image_icon'></View>
            <View className='shareImage_image_font'>推荐语</View>
          </View> */}
        </View>
        <View className='shareImage_image_collect'>
          <View className='shareImage_wechat_friend' onClick={() => containerRef.current.share()}>转发给朋友</View>
          <View className='shareImage_wechat_download' onClick={() => containerRef.current.download()}>保存海报</View>
        </View>
      </View>
    </View>
  </Mask >


}
export default ShareImage